<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="添加商品介绍信息"
             width="60%" @open="open" @close="close">
    <good-search-dialog v-model="searchDialogVisible" @select="searchGoodChange"/>
    <el-row :gutter="40">
      <el-col :span="12">
        <xum-title title="数据类型"/>
        <el-radio-group v-model="produceType" style="margin: 15px 0 20px 15px;">
          <el-radio :label="1">文本类型</el-radio>
          <el-radio :label="2">图片类型（推荐）</el-radio>
          <el-radio :label="3">超文本类型</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="12">
        <xum-title title="链接地址"/>
        <el-radio-group v-model="linkType" style="margin: 15px 0 20px 15px;">
          <el-radio :label="1">商品（推荐）</el-radio>
          <el-radio :label="2">链接</el-radio>
        </el-radio-group>
        <div style="padding: 0 14px">
          <el-input v-model="linkGoodText" size="small" v-if="linkType === 1" :disabled="true"
                    placeholder="点击搜索按钮搜索商品">
            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer"
               @click="openSearchDialog"/>
          </el-input>
          <el-input v-model="link" size="small" v-if="linkType === 2" :disabled="linkType !== 2"
                    placeholder="输入完整链接地址，如 http://www.baidu.com/search?type=default"/>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" style="margin-top: 20px;">
      <el-col :span="12">
        <xum-title title="顺序号"/>
        <el-row :gutter="0">
          <!--suppress HtmlDeprecatedAttribute -->
          <el-col :span="24" align="center">
            <el-input-number size="small" v-model="sortNumber" placeholder="循序号，小数在前"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <xum-title title="备注"/>
        <div style="padding: 0 14px">
          <el-input size="small" v-model='remark' placeholder="备注信息"/>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" style="margin-top: 20px;">
      <el-col :span="24">
        <xum-title title="数据内容"/>
        <div v-if="produceType === 1" style="padding: 1px 20px;">
          <el-input type="textarea" placeholder="请输入文本信息" v-model="textContent"
                    :autosize="{ minRows: 6, maxRows: 6}" :disabled="produceType !== 1"
                    style="margin-top: 10px;"/>
        </div>
        <part-image-selector ref="imgSelector" v-if="produceType === 2" :disabled="produceType !== 2"
                  style="margin-bottom: -30px;"/>
        <div v-if="produceType === 3" style="padding: 1px 20px;">
          <el-input type="textarea" placeholder="请输入富文本数据" v-model="richContent"
                    :autosize="{ minRows: 6, maxRows: 6}" :disabled="produceType !== 3"
                    style="margin-top: 10px;"/>
        </div>
      </el-col>
    </el-row>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="resetDialog">重置</el-button>
        <el-button @click="handleSubmit" :loading="submitLoading" type="primary">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import XumTitle from '@/components/XumTitle'
import GoodSearchDialog from '@pages/goods/part/GoodSearchDialog'
import PartImageSelector from '@pages/goods/part/pageGoodsList/PartImageSelector'
import { insertGoodProduce, insertGoodProduceWithFile } from '@/api/ApiGoodProduce'
import GoodProduceInsertDTO from '@/api/entity/GoodProduceInsertDTO'
import { ResultCode } from '@/constants/constants'
export default {
  name: 'GoodProduceAddDialog',
  components: { PartImageSelector, GoodSearchDialog, XumTitle },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    goodId: {
      required: true,
      type: [Number, String]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      submitLoading: false,
      dialogVisible: false,
      searchDialogVisible: false,
      searchGood: null,
      produceType: 2,
      linkType: 1,
      link: '',
      linkGoodId: 0,
      textContent: '',
      richContent: '',
      sortNumber: 0,
      remark: ''
    }
  },
  computed: {
    linkGoodText () {
      return this.searchGood && this.linkGoodId && this.linkGoodId > 0 ? this.searchGood.name : ''
    }
  },
  methods: {
    /**
     * 重置数据
     */
    resetDialog () {
      this.searchDialogVisible = false
      this.searchGood = null
      this.produceType = 2
      this.linkType = 1
      this.link = ''
      this.linkGoodId = 0
      this.textContent = ''
      this.richContent = ''
      this.sortNumber = 0
      this.remark = ''
      this.$refs.imgSelector.resetData()
    },
    /**
     * 对话框开启拦截
     */
    open () {
      this.resetDialog()
    },
    close () {
      this.resetDialog()
    },
    /**
     * 关闭对话框
     */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
     * 打开上商品搜索对话框
     */
    openSearchDialog () {
      this.searchDialogVisible = true
    },
    /**
     * 选择商品改变
     */
    searchGoodChange (val) {
      if (val && val.id) {
        this.searchGood = val
        this.linkGoodId = val.id
      } else {
        this.searchGood = null
        this.linkGoodId = 0
      }
    },
    /**
     * 提交数据
     */
    handleSubmit () {
      if (this.produceType === 1) {
        this.submitText()
      } else if (this.produceType === 2) {
        this.submitImage()
      } else if (this.produceType === 3) {
        this.submitRichText()
      } else {
        this.$message.error('错误的商品介绍数据类型')
      }
    },
    submitText () {
      const text = this.textContent
      if (!text || text.length <= 0) {
        this.$message.error('数据内容不能为空')
        return
      }
      this.submitLoading = true
      const params = GoodProduceInsertDTO.instance()
      params.setGoodId(this.goodId)
      params.setContentType('TEXT')
      params.setContent(text)
      if (this.linkType === 1) {
        params.setLinkGoodId(this.linkGoodId)
      } else if (this.linkType === 2) {
        params.setLinkUrl(this.link)
      }
      params.setSortNumber(this.sortNumber)
      params.setRemark(this.remark)
      insertGoodProduce([params], data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('保存数据成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    },
    submitImage () {
      const images = this.$refs.imgSelector.getAddFileList()
      if (!images || images.length <= 0) {
        this.$message.error('至少包含一张商品介绍图片')
        return
      }
      this.submitLoading = true
      const params = GoodProduceInsertDTO.instance()
      params.setGoodId(this.goodId)
      params.setContentType('PICTURE')
      params.setContent('PICTURE')
      if (this.linkType === 1) {
        params.setLinkGoodId(this.linkGoodId)
      } else if (this.linkType === 2) {
        params.setLinkUrl(this.link)
      }
      params.setSortNumber(this.sortNumber)
      params.setRemark(this.remark)
      insertGoodProduceWithFile(params, images, data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('保存数据成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    },
    submitRichText () {
      const richText = this.richContent
      if (!richText || richText.length <= 0) {
        this.$message.error('数据内容不能为空')
        return
      }
      this.submitLoading = true
      const params = GoodProduceInsertDTO.instance()
      params.setGoodId(this.goodId)
      params.setContentType('RICH_TEXT')
      params.setContent(richText)
      if (this.linkType === 1) {
        params.setLinkGoodId(this.linkGoodId)
      } else if (this.linkType === 2) {
        params.setLinkUrl(this.link)
      }
      params.setSortNumber(this.sortNumber)
      params.setRemark(this.remark)
      insertGoodProduce([params], data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('保存数据成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped>

</style>
